<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useRouter } from 'vue-router'
import {
  getScreenDeviceMonitorCount, getScreenDeviceMonitorList,
  getScreenScoreNoticeList, getScreenToolInfoList,
  getScreenDataToolHisList,checkDataToolHis
} from "@/api/base";
interface DeviceStatistics {
  deviceNum?: number;
  powerNum?: number;
  alarmNum?: number;
}
interface QueryPage {
  pageNum: number;
  pageSize: number;
  total: number;
}
// 获取链接参数id
const router = useRouter()
const cid = router.currentRoute.value.query.cid as string
const queryPage = ref<QueryPage>({ pageNum: 1, pageSize: 100, total: 0 })
const popupShow = ref(false)

onMounted(() => {
  getCount()
  getMonitorList(queryPage.value.pageNum)
  getGradeData()
  getToolsData()
  getAccessData(0)
  getAccessData(1)
})

// 统计信息
const deviceStatistics = ref<DeviceStatistics>({})
const getCount = () => {
  getScreenDeviceMonitorCount(cid).then((res) => {
    if (res.code === 200) {
      deviceStatistics.value = res.data
    }
  })
}
// 检测列表
const monitorList = ref<any>([])
const getMonitorList = (pageNum: number) => {
  getScreenDeviceMonitorList(cid, pageNum, queryPage.value.pageSize).then((res) => {
    if (res.code === 200) {
      queryPage.value.total = res.count
      monitorList.value = res.data || []
    }
  })
}
// 成绩公告
const gradeData = ref<any>([])
const getGradeData = () => {
  getScreenScoreNoticeList(1).then((res) => {
    gradeData.value = res.data || []
  })
}
// 工具信息
const toolsData = ref<any>([])
const getToolsData = () => {
  getScreenToolInfoList().then((res) => {
    toolsData.value = res.data || []
  })
}
// 存取记录
const depositData = ref<any>([])
const getData = ref<any>([])
const getAccessData = (type: number) => {
  getScreenDataToolHisList(type).then((res) => {
    if (type == 0) {
      depositData.value = res.data || []
    } else {
      getData.value = res.data || []
    }
  })
}
const inventoryData = ref<any>([])
const _checkDataToolHis=(type:number)=>{
  checkDataToolHis(type).then((res) => {
    if (res.code === 200) {
      const rData =[]
      res.data?.forEach(item=>{
        item?.list?.forEach(item2=>{
          rData.push({
            pObj:item,
            ...item2
          })
        })
      })
      inventoryData.value = rData
      popupShow.value=true
    }
  })
}
const back = () => {
  router.go(-1)
}
const type = window.localStorage.getItem('type')
console.log(type)
watch(queryPage, (val) => {
  getMonitorList(val.pageNum)
})
</script>

<template>
  <div class="home-all">
    <div class="page-name">
      <img @click="back" class="public-back_img cursor-pointer" src="@/assets/publick-back.png" alt="" >
      <span @click="back" class="public-back_tit cursor-pointer">装置状态</span>
    </div>
    <div class="home-left">
      <div class="home-monitor public-list_tit home-left_tit" />
      <div class="home-cont home-bg">
        <div class="home-cont_top">
          <div class="home-top_li">
            <img class="home-top_li--img" src="@/assets/device/device1.png" alt="">
            <div class="home-top_li--num">
              <p>装置数量</p>
              <span>{{ deviceStatistics.deviceNum }}</span>
            </div>
          </div>
          <div class="home-top_li">
            <img class="home-top_li--img" src="@/assets/device/device2.png" alt="">
            <div class="home-top_li--num">
              <p>上电装置</p>
              <span>{{ deviceStatistics.powerNum }}</span>
            </div>
          </div>
          <div class="home-top_li">
            <img class="home-top_li--img" src="@/assets/device/device3.png" alt="">
            <div class="home-top_li--num">
              <p>报警数量</p>
              <span>{{ deviceStatistics.alarmNum }}</span>
            </div>
          </div>
        </div>
        <el-scrollbar height="690">
          <div class="home-list">
            <div class="home-li" v-for="(item, index) in monitorList" :key="index">
              <div class="home-li_top">
                <img :src="item.image" alt="">
                <div class="home-li_top--tit">{{ item.name }}</div>
              </div>
              <div class="home-li_bom">
                <div class="home-bom_li">
                  当前用电状态：<span class="home-bom_li--tit">{{ item.status == 1 ? "使用" : "空闲" }}</span>
                </div>
                <div class="home-bom_li">
                  报警数(个）：<span class="home-bom_li--tit">{{item.alarmNum}}</span>
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
<!--        <div class="home-page">-->
<!--          <el-pagination class="public-page" background prev-text="上一页" next-text="下一页"-->
<!--            v-model:current-page="queryPage.pageNum" layout="prev, pager, next" :total="queryPage.total" />-->
<!--        </div>-->
      </div>
    </div>
    <div class="home-right">
      <div class="home-right_top" v-if="type!=='1'">
        <div class="public-notice public-list_tit" />
        <div class="home-table home-bg" style="margin-bottom: 10px">
          <el-table :data="gradeData" show-overflow-tooltip class="public-table" header-row-class-name="public-header_row"
            header-cell-class-name="public-header_cell" row-class-name="public-body_row"
            cell-class-name="public-body_cell" height="350">
            <el-table-column prop="deviceNo" label="装备编号" align="center" header-align="center" />
            <el-table-column prop="matchLength" label="比赛时长" align="center" header-align="center" width="100"/>
            <el-table-column prop="matchScore" label="比赛得分" align="center" header-align="center" width="100">
              <template #default="scope">
                <span class="public-table_tit">{{ scope.row.matchScore }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="startTime" label="开始时间" align="center" header-align="center" />
            <el-table-column prop="endTime" label="结束时间" align="center" header-align="center" />
          </el-table>
        </div>
      </div>
      <div class="home-right_bom">
        <div class="public-tool public-list_tit" />
        <div class="home-right-cont home-bg">
          <div class="table-tool">
            <el-table :data="toolsData" class="public-table public-table_list" header-row-class-name="public-header_row"
              header-cell-class-name="public-header_cell" row-class-name="public-body_row"
              cell-class-name="public-body_cell" :height="type=='1'?740:370">
              <el-table-column prop="toolName" label="工具名称" align="center" header-align="center" />
              <el-table-column prop="toolTotal" label="工具总数" align="center" header-align="center" />
              <el-table-column prop="currentNum" label="当前数量" align="center" header-align="center" />
            </el-table>
            <el-table :data="depositData" class="public-table public-table_list" header-row-class-name="public-header_row"
              header-cell-class-name="public-header_cell" row-class-name="public-body_row"
              cell-class-name="public-body_cell" :height="type=='1'?740:370">
              <el-table-column prop="personName" label="存入人姓名" align="center" header-align="center" />
              <el-table-column prop="image" label="图像" align="center" header-align="center">
                <template #default="scope">
                  <img class="table-img" :src="scope.row.image" alt="">
                </template>
              </el-table-column>
              <el-table-column prop="nowTime" label="存入时间" align="center" header-align="center" />
            </el-table>
            <el-table :data="getData" class="public-table" header-row-class-name="public-header_row"
              header-cell-class-name="public-header_cell" row-class-name="public-body_row"
              cell-class-name="public-body_cell" :height="type=='1'?740:370">
              <el-table-column prop="personName" label="取出人姓名" align="center" header-align="center" />
              <el-table-column prop="image" label="图像" align="center" header-align="center">
                <template #default="scope">
                  <img class="table-img" :src="scope.row.image" alt="">
                </template>
              </el-table-column>
              <el-table-column prop="nowTime" label="取出时间" align="center" header-align="center" />
            </el-table>
          </div>
          <div class="home-foot">
            <el-button @click="_checkDataToolHis(0)" class="home-foot_btn foot-btn" color="#44CCFF" type="primary">一键盘点</el-button>
            <el-button @click="_checkDataToolHis(1)" class="foot-btn" color="#1B99FF" type="primary">定时盘点</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="dev-popup" v-if="popupShow">
      <div class="dev-overlay" />
      <div class="dev-cont">
        <div class="dev-top">
          <span>盘点结果</span>
          <CircleClose @click="popupShow=false" color="#1B99FF" class="dev-icon" />
        </div>
        <div class="dev-table">
          <el-table :data="inventoryData" class="public-table" header-row-class-name="public-header_row"
            header-cell-class-name="public-header_cell" row-class-name="public-body_row"
            cell-class-name="public-body_cell" height="450">
            <el-table-column prop="toolName" label="缺失工具名称" align="center" header-align="center" />
            <el-table-column prop="pObj.num" label="缺失数量" align="center" header-align="center" />
            <el-table-column prop="pObj.storeTime" label="存入时间" align="center" header-align="center" />
            <el-table-column prop="takeTime" label="取出时间" align="center" header-align="center" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.page-name{
  position: absolute;
  top: 60px;
  left: 16px;
  display: flex;
  align-items: center;
  .public-back_img{
    width: 32px;
    height: 32px;
  }
  .public-back_tit{
    margin-left: 6px;
    color: transparent;
    background-image: linear-gradient(#EEEEEE 0%, #1EA0FF 100%);
    -webkit-background-clip: text;
    font-family: YouSheBiaoTiHei;
    font-size: 24px;
    line-height: 31px;
    font-style: normal;
    font-weight: bold;
  }
}
.dev-overlay {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99;
}

.dev-cont {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  z-index: 100;
  padding: 11px 36px 29px 31px;
  width: 699px;
  height: 570px;
  background: rgba(6, 17, 65, 0.99);
  border: 1px solid #061141;

  .dev-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
      font-family: YouSheBiaoTiHei;
      font-size: 32px;
      color: #fff;
      font-style: normal;
    }

    .dev-icon {
      width: 32px;
      height: 32px;
      cursor: pointer;
    }
  }

  .dev-table {
    margin-top: 25px;
    padding: 0 16px 0 25px;
  }
}

.home-all {
  display: flex;

  .home-left {
    width: 992px;
    margin-right: 22px;
  }

  .home-right {
    width: 992px;
  }
}

.home-left {
  .home-cont {
    margin-top: 12px;
    padding: 21px 42px 44px 36px;

    .home-cont_top {
      margin-bottom: 62px;
      display: flex;
      align-items: center;

      .home-top_li {
        width: 268px;
        height: 123px;
        background: url("@/assets/device/device-bg.png") no-repeat;
        display: flex;
        align-items: center;
        margin-right: 34px;
        padding-left: 33px;

        &.home-top_li:last-child {
          margin-right: 0;
        }

        .home-top_li--img {
          width: 61px;
          height: 62px;
          margin-right: 27px;
        }

        .home-top_li--num {
          p {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 18px;
            color: #fff;
            line-height: 23px;
            text-shadow: 0 2px 6px #011853;
            font-style: normal;
            margin-bottom: 4px;
          }

          span {
            font-family: YouSheBiaoTiHei;
            font-size: 36px;
            color: #00FFFF;
            line-height: 42px;
            font-style: normal;
          }
        }
      }
    }

    .home-list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .home-li {
        width: 266px;
        height: 282px;
        background: #043053;
        border-radius: 8px;
        border: 1px solid #1A94FF;
        margin-right: 32px;
        margin-bottom: 18px;

        &.home-li:nth-child(3n) {
          margin-right: 0;
        }

        .home-li_top {
          position: relative;
          height: 188px;

          img {
            width: 100%;
            height: 188px;
          }

          .home-li_top--tit {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 39px;
            line-height: 39px;
            text-align: center;
            background: rgba(0, 0, 0, 0.38);
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 24px;
            color: #fff;
            font-style: normal;
            white-space: nowrap;
            /* 强制不换行 :ml-search[white-space] */
            overflow: hidden;
            /* 隐藏溢出内容 :ml-search[overflow] */
            text-overflow: ellipsis;
            /* 显示省略号 :ml-search[text-overflow] */
          }
        }

        .home-li_bom {
          padding: 15px 14px 17px;

          .home-bom_li {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 18px;
            color: #fff;
            line-height: 25px;
            font-style: normal;
            margin-bottom: 6px;
          }

          .home-bom_li--tit {
            color: #03FFFF;
          }
        }
      }
    }
  }
}

.home-table {
  padding: 15px 9px;
}

.home-right {
  display: flex;
  flex-direction: column;

  .home-right_bom {
    flex: 1;
  }
}

.home-left_tit {
  background: url("@/assets/list-tit1.png") no-repeat;
}

.public-notice {
  background: url("@/assets/list-tit2.png") no-repeat;
}

.public-tool {
  background: url("@/assets/list-tit3.png") no-repeat;
}

.table-tool {
  display: flex;
  padding: 6px 9px;
}

.public-table_tit {
  color: #00FFFF;
}

.public-table_list {
  margin-right: 11px;
}

.table-img {
  width: 55px;
  height: 55px;
}

.home-page {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 35px;
}

.home-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}

.foot-btn {
  width: 257px;
  height: 63px;
  line-height: 63px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 24px;
  color: #fff;
  font-style: normal;
}

:deep(.public-page.is-background .btn-next, .public-page.is-background .btn-prev) {
  background-color: #1B99FF !important;
  border-radius: 7px;
  color: #fff;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 18px;
  font-style: normal;
  padding: 7px 21px;
}

:deep(.public-page.is-background .el-pager li) {
  background-color: rgba(255, 255, 255, 0);
  color: #fff;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 18px;
  font-style: normal;
  padding: 5px 13px;
}

//.el-pagination.is-background .btn-next.is-active, .el-pagination.is-background .btn-prev.is-active,
:deep(.public-page.is-background .el-pager li.is-active) {
  background: #1B99FF !important;
  border-radius: 7px;
}

:deep(.public-page.is-background .btn-next.is-disabled, .public-page.is-background .btn-next:disabled, .public-page.is-background .btn-prev.is-disabled, .public-page.is-background .btn-prev:disabled, .public-page.is-background .el-pager li.is-disabled, .public-page.is-background .el-pager li:disabled) {
  color: #fff !important;
}


:deep(.public-table) {
  background: rgba(255, 255, 255, 0);
  --el-table-bg-color: rgba(255, 255, 255, 0);
  --el-table-tr-bg-color: rgba(255, 255, 255, 0);
  --el-table-header-bg-color: rgba(255, 255, 255, 0);
}

:deep(.public-table .el-table__inner-wrapper:before) {
  height: 0;
}

:deep(.public-table .el-table__header-wrapper th) {
  border-color: #1A94FF !important;
  font-size: 15px !important;
  /* 改变边框颜色 */
}

:deep(.public-header_row) {
  background-color: #043053 !important;
}

:deep(.public-table th.el-table__cell.is-leaf) {
  border-top: 1px solid #1A94FF;
}

:deep(.public-table th:first-child) {
  border-left: 1px solid #1A94FF;
}

:deep(.public-table th:last-child) {
  border-right: 1px solid #1A94FF !important;
}

:deep(.public-header_cell) {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #1B99FF;
  font-style: normal;
}

:deep(.public-body_row) {
  background: rgba(13, 176, 246, 0.15) !important;
}

:deep(.public-body_cell) {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  font-style: normal;
}

:deep(.public-table td.el-table__cell) {
  border: none;
}

:deep(.public-table .el-table__body) {
  -webkit-border-vertical-spacing: 4px;
}

:deep(.public-table .el-table__body tr>td) {
  background-color: rgba(13, 176, 246, 0.15) !important;
}
</style>
